<template>
  <div id="app">
    <el-container>
      <el-header>
        <div id="pilot">
          <el-row :gutter="60">
            <el-col :span="14">
              <div style="width: 50%">
                <el-input
                    placeholder="搜索用户关键字"
                    prefix-icon="el-icon-search"
                    v-model="searchText"
                    @keydown.enter.native = "search"
                    clearable
                >
                  <el-button
                      slot="append"
                      type="primary"
                      @click="search">搜索</el-button>

                </el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div style="float: right">
                <el-button type="danger" :disabled="deleteToggle" @click="deleteUsersBySelection">删除</el-button>

              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <el-main style="min-height: 750px">
        <div class="table">
          <el-table
              :data="tableData"
              border
              style="width: 100%"
              @selection-change="handleSelectionChange"
          >
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="头像"
                width="120">
              <template slot-scope="scope" style="margin: 0">
                <img :src="scope.row.userImg | url" alt="" style="width: 100px;border-radius: 10px;">
              </template>

            </el-table-column>
            <el-table-column
                prop="userName"
                label="账号id"
                width="120">
            </el-table-column>
            <el-table-column
                prop="nickName"
                label="昵称"
                width="120">
            </el-table-column>
            <el-table-column
                prop="level"
                label="等级"
                width="120">
            </el-table-column>
            <el-table-column
                prop="balance"
                label="余额"
                width="120">
            </el-table-column>
            <el-table-column
                prop="userType"
                label="权限"
                width="120">
            </el-table-column>
            <el-table-column
                label="偏好"
                width="">
              <template slot-scope="scope">
                <el-tag
                    :key="index"
                    v-for="(name,index) in scope.row.hobby"
                    :disable-transitions="false">
                  {{name}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="200">
              <template slot-scope="scope">
                <el-row :gutter="10">
                  <el-col :span="8">
                    <el-button type="primary" icon="el-icon-edit" circle size="small" @click="editUser(scope.row)"/>
                  </el-col>
                  <el-col :span="8">
                    <el-popconfirm
                        confirm-button-text='好的'
                        cancel-button-text='不用了'
                        icon="el-icon-info"
                        icon-color="red"
                        title="数据无价,确定删除吗？"
                        @confirm="deleteUserByRow(scope.row.userNumber)"
                    >
                    <el-button slot="reference" size="small" type="danger" circle icon="el-icon-delete"/>
                    </el-popconfirm>
                  </el-col>
                  <el-col :span="8"></el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>

        </div>
        </el-main>
      <el-footer>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="current_change"/>
      </el-footer>
    </el-container>
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="700px">
      <UserEditComponent :user="currentUser" v-on:dialogVisible="dialogVisible=false"/>
    </el-dialog>
  </div>
</template>

<script>
import {delUserByNumberList, getBookList, getUserList, searchUserByInfo} from "@/utils/api";
import UserEditComponent from "@/components/manage/user/UserEditComponent";

export default {
  name: "ManageUserComponent",
  components: {UserEditComponent},
  props: {},
  data() {
    return {
      searchText:'',
      currentPage :1,
      total : 0,
      pageSize : 5,
      // tableData:Array
      tableData: [],
      dialogVisible: false,
      currentUser:Object,
      deleteToggle:true,
      selection:Array
    }
  }, methods: {
    deleteUserByRow(number){
      this.deleteUsers([number])
    },
    deleteUsersBySelection(){
      let numberList =[]
      for (const selectionElement of this.selection) {
        numberList.push(selectionElement.userNumber)
      }
      // console.log(numberList)
      this.deleteUsers(numberList)
    },
    async deleteUsers(numberList){
      // console.log("删除!"+numberList)
      delUserByNumberList(
        numberList
      ).then(res=>{
        if(res.code === 200){
          this.notify(res.message,"","success")
          // console.log(this.tableData)
          for (var i = 0; i < this.tableData.length; i++){
            if(numberList.includes(this.tableData[i].userNumber)) {
              this.tableData.splice(i--, 1);
            }
          }
          if(this.tableData.length==0){
            this.currentPage--
            this.load()
          }
        }else{
          this.notify(res.message,"","error")
        }
      })
    },
    handleSelectionChange(selection){
      this.deleteToggle = selection.length==0
      // console.log(selection)
      this.selection = selection
    },
    editUser(row){
      // console.log(row)
      this.currentUser = row
      this.currentUser.password = '';
      this.dialogVisible = true
    },
    search(){
      let keyword = this.searchText;
      console.log(keyword)
      searchUserByInfo({
        keyword
      }).then(res=>{
        if(res.code === 200){
          // this.notify(res.message,"","success")
          console.log(res)
          this.tableData = res.objects
          this.total = this.tableData.length
          this.pageSize = this.tableData.length
        }else{
          this.notify(res.message,"","error")
        }
      })
    },
    current_change(newPage){
      this.currentPage = newPage
      this.load()
    },
    async load(){
      getUserList({
        currentPage : this.currentPage,
        pageSize : this.pageSize
      }).then(res=>{
        if(res.code === 200){
          // this.notify(res.message,"","success")
          // console.log(res)
          this.tableData = res.objects['users']
          this.total = res.objects['total']
        }else{
          this.notify(res.message,"","error")
        }
      })
    },
    notify(msg,title,type) {
      this.$notify({
        title: title,
        message: msg,
        type: type
      });
    },
    log(msg,type){
      this.$message({
        message: msg,
        type: type
      });
    }
  }, watch: {
    searchText(newName, oldName){
      if(newName === ''){

        this.pageSize = 5
        this.current_change(1)
      }
    }
  }, computed: {},mounted() {
    this.current_change(1)
  },filters:{
    url(value){
      return '/api'+value;
    }
  }
}
</script>

<style scoped>
.table{
}
</style>